<template>
  <div class="playlistdetail">
    <div class="title" >
      <img :src="titlepic.coverImgUrl" alt="" />
    </div>

    <span>歌曲列表</span>
    <div class="playlist">
      <div class="content">
        <ul>
            <li v-for="item in songlist" :key="item.id">
                <div class="playlist-left">
                    <span>{{item.name}}</span>
                    <p></p>
                </div>
                <div class="play-circle">
                    <img src="" alt="" />
                </div>
            </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
        songlist:[],
        titlepic:{}
    };
  },
  created() {
    this.getSongData();
  },
  methods: {
    getSongData() {
      axios
        .get("/api/playlist/detail/dynamic", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          console.log(res.data.playlist);
          this.songlist = res.data.playlist.tracks,
          this.titlepic = res.data.playlist
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>
<style scoped>
.title>img{
  margin-top: 20px;
  height: 300px;
}
.playlist{
  margin-top: 30px;
}
/* .playlist-left{
 margin-top: 10px;
 margin-bottom: 10px;
} */
</style>